<template>
  <div class="customer-manager wap">
    <div class="header display-flex align-items-center">
      <img class="close" @click="closePage" src="../../assets/img/cart/close.png" >
      <group class="flex-1">
        <x-input @keyup.enter.native="showSearch" v-model="searchKey" type="text" :show-clear="false"
                 :placeholder="searchIcon"></x-input>
      </group>
      <span class="btn-search" @click="showSearch">搜索</span>
    </div>


    <div class="main">
      <scroller
        ref="scrollerRef"
        :noDataText="this.$noData(customerList)"
        :on-refresh="refresh"
        :on-infinite="infinite">
          <div>
            <customerSearchItem :list="customerList"></customerSearchItem>
          </div>
        <!--<no-data v-show="loadOk" @refreshData="refresh(0)" :list="customerList"></no-data>-->
      </scroller>
      <div v-show="loadOk" v-if="customerList.length==0" style="text-align: center;color:#999;margin-top: .2rem;" >暂无客户</div>
    </div>


       <div class="pop-sort-content" v-if="showSort">
         <ul class="content">
           <li @click="closeDialog(0)" v-for="(item,index) in 5" :key="index" class="vux-1px-b display-flex align-items-center justify-content-flex-justify">
             <span :class="selectIndex==-1?'selectText':''">未开始</span>
             <img  src="../../assets/img/order/select.png" alt="">
           </li>
         </ul>
       </div>

  </div>
</template>
<script type="text/ecmascript-6">
    import customerSearchItem from '../../components/customer-manager-search-item.vue'
  export default {
      components:{
          customerSearchItem
      },
    data(){
      return {
          searchIcon: '\ue630 输入客户信息',
          searchKey: '',
          selectIndex:-1,
        showSort:false,
        page:1,
        customerList:[],
        hasNext:true,
        from:true,
        test:[
          {
            obj:{
              name:"aaa"
            }

          }
        ],
        token:"",
        loadOk:false,
        customeNum:0
      }
    },
    created(){
      this.token=this.$storage.get("token");
      // this.initData(0);
    },
    mounted(){
      window['androidCallJs'] =this.androidCallJs;
    },
    methods:{
      androidCallJs(val){
        try {
          val= decodeURIComponent(val.replace(/\+/g, '%20'));
          let obj=JSON.parse(val);
          let buyerId =obj.buyerId;
          if(buyerId>0){
            for(let i=0;i<this.customerList.length;i++){
              if(this.customerList[i].customerId==buyerId){
                this.customerList[i].customerTips=obj.LableList;
                this.$set(this.customerList, i, this.customerList[i]);
                break;
              }
            }
          }
        }catch (e){
        }
      },
        closePage(){
            if(this.$fromApp(this)){
                this.$callJava({code:1003, quick :true})
            }
        },
        showSearch() {
            if (this.searchKey.trim().length == 0) {
                this.$vux.toast.text("请输入关键词", 'center');
                return;
            }
            this.refresh();
        },
        showSortPop(){
            this.showSort=true;
        },
        closeDialog(){
            this.showSort=false;
        },
      initData(type){
        this.$ajax.get("customer/list",(res) => {
          console.log("page",this.page,"===type",type,"===page",this.page,"===this.customerList",this.customerList)
          console.log("res",res)
          if(res.code==200) {
              this.customeNum = res.data.customerCount;
              if (res.data && res.data.list) {
                this.customerList = type==0 ? res.data.list : this.customerList.concat(res.data.list);
                this.page++
              }
              if (this.$refs.scrollerRef && type == 0) {
                  setTimeout(()=>{
                      this.$refs.scrollerRef.finishPullToRefresh();
                      this.$refs.scrollerRef.finishInfinite(true);
                  },100)
              }
                if(!res.data||res.data.list<this.$rows){
                  this.hasNext=false;
                  if(this.$refs.scrollerRef){
                    this.$refs.scrollerRef.finishInfinite(true);
                  }
                }else{
                  this.hasNext=true;
                  this.$refs.scrollerRef&&this.$refs.scrollerRef.finishInfinite(false);
                }
              }else{
                this.hasNext=false;
                this.$vux.toast.text(res.msg, 'center');
                this.$refs.scrollerRef&&this.$refs.scrollerRef.finishPullToRefresh();
                this.$refs.scrollerRef&&this.$refs.scrollerRef.finishInfinite(false);
              }
              this.loadOk=true;

        },{pageNo :this.page,pageSize:this.$rows,searchKey:this.searchKey});
      },
      refresh(){
        console.log("refresh")
        this.hasNext=true;
        this.page=1;
        this.initData(0);
          this.$refs.scrollerRef && this.$refs.scrollerRef.scrollTo(0, 0, false)
      },
      infinite(){
        setTimeout(()=>{
          if(this.hasNext){
            console.log("infinite")
            this.initData(1);
          }else{
            this.$refs.scroll&&this.$refs.scroll.finishInfinite(true)
          }
        },100)
      },

      goCategory(){
        if(this.$fromApp(this)){
          this.$callJava({url:this.$webUrl+"category/mamager?from=app"+"&Authorization="+this.$storage.get("token")})
        }else{
          this.$router.push({ path:'/category/mamager'})
        }
      },
    }
  }
</script>

<style lang="less" type="text/less"  scoped>
  .customer-manager{
    background: #F6F6F6;
    position: relative;
    .header{
     height: 1rem;
      .close{
        width: .3rem;
        height: .3rem;
        padding: .3rem;
      }
      .btn-search{
        padding: 0rem .2rem;
        color: #999;
        font-size: .3rem;
      }
    }

    /deep/ .weui-cell {
      background: #F6F6F6 !important;
      padding: 0rem;
    }
    /deep/ .weui-cells {
      margin-top: 0 !important;

    }
    /deep/ .weui-input {
      font-size: .28rem;
      text-align: left;
      background: #eee;
      border-radius: .32rem;
      height: .64rem;
      padding-left: .3rem;
      box-sizing: border-box;
    }
    /deep/ .weui-cells:after{
      border: none;
    }
    ::-webkit-input-placeholder { /*Webkit browsers*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    :-moz-placeholder { /*Mozilla Firefox 4 to 8*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    ::moz-placeholder { /*Mozilla Firefox 19+*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }
    :-ms-input-placeholder { /*Internet Explorer 10+*/
      color: #c6c6c6;
      font-size: 16px;
      font-family: "iconfont" !important;
    }

  }
</style>
